<template>
  <div class="Productionmanage">
    <!-- 筛选 --start-->
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="输入搜索">
          <el-input v-model="formInline.key" placeholder="请输入订单号"></el-input>
        </el-form-item>
        <el-form-item label="输入时间">
          <el-date-picker
            v-model="formInline.time1"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chage"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- <el-button class="ebtn" type="warning" @click="newquip">新增设备</el-button> -->
    </div>
    <!-- 筛选 --end-->
    <div class="ProductionmanageList">
      <el-table :data="tableData" height="630px" stripe>
        <el-table-column prop="xuhao" label="序号" width="100px" align="center"></el-table-column>
        <el-table-column prop="productionno" label="订单号" align="center"></el-table-column>
        <el-table-column prop="productname" label="产品名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="productype" label="产品类型" align="center"></el-table-column>
        <el-table-column prop="jiaohuonumber" label="交货数量" align="center"></el-table-column>
        <el-table-column prop="jiaohuodate" label="交货日期" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ordertype" label="订单类型" align="center"></el-table-column>
        <el-table-column prop="states" label="状态" align="center"></el-table-column>
        <el-table-column prop label="操作" align="center" width="240px">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="warning"
              v-if="scope.row.states =='待生产'"
              @click="picking(scope.row.productionno)"
            >领料</el-button>
            <el-button size="small" type="warning" v-if="scope.row.states =='X工序'" @click="xl">下料</el-button>
            <el-button
              size="small"
              type="warning"
              v-if="scope.row.states =='冲压'"
              @click="sroduction"
            >生产</el-button>
            <el-button size="small" type="warning" v-if="scope.row.states =='已完成'" @click="over">完成</el-button>
            <el-button size="small" type="warning" v-if="scope.row.states =='待入库'" @click="rk">入库</el-button>
            <el-button
              type="primary"
              size="small"
              @click="Detail(scope.row.productionno,scope.row.productno)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="新建领料"
      :modal-append-to-body="false"
      :visible.sync="dialogVisiblepicking"
      width="1000px"
    >
      <div class="color_box"></div>
      <div class="contents">
        <div class="accessories" :v-model="form">
          <div class="f1">
            <el-form :model="form" class="demo-form-inline" label-width="130px">
              <el-form-item label="领料时间">
                <el-input v-model="form.pingkingon"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="f1">
            <el-form :model="form" class="demo-form-inline" label-width="130px">
              <el-form-item label="领料产线">
                <el-input v-model="form.rawno"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="accessories">
          <p class="Headline">生产计划</p>
          <el-table :data="tableDatasc" :max-height="150" stripe>
            <el-table-column prop="text" type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="productname" label="产品名称" align="center"></el-table-column>
            <el-table-column prop="productype" label="产品类型" align="center"></el-table-column>
            <el-table-column prop="yuchang" label="预产量" align="center" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
        <div class="accessories">
          <p class="Headline">领料清单</p>
          <el-table :data="tableDataqd" :max-height="150" stripe>
            <el-table-column prop="text" type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="rawname" label="物料名称" align="center"></el-table-column>
            <el-table-column prop="rawtype" label="物料类型" align="center"></el-table-column>
            <el-table-column prop="address" label="库存位置" align="center"></el-table-column>
            <el-table-column prop="inventory" label="库存数量" align="center"></el-table-column>
            <el-table-column prop="pinkingnumber" label="领料数量" align="center"></el-table-column>
          </el-table>
        </div>
        <div class="Btn">
          <el-button type="primary" @click="pinkBtn()">确认</el-button>
          <el-button type="info" @click="dialogVisiblepicking = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <div class="pgnt">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      xuhao: "",
      tableDatasc: [
        {
          xuhao: "1"
        }
      ],
      tableDataqd: [
        {
          xuhao: "1"
        }
      ],
      form: {},
      index: 1,
      formInline: {
        key: ""
      },
      start: "",
      end: "",
      total: 1,
      current: 1,
      pagesize: 10,
      dialogVisiblepicking: false,
      pingkingno: "订单号"
    };
  },
  created() {
    this.getlist(0);
    this.Getlist();
  },
  methods: {
    xl() {
      this.$router.push("/Productiontesting");
    },
    sroduction() {
      this.$router.push("/Productiontesting");
    },
    over() {
      this.$router.push("/Productiontesting");
    },
    rk() {
      this.$router.push("/Finishedstore");
    },
    picking(a) {
      this.dialogVisiblepicking = true;
      axios("/apis/ProductionManagement.asmx/Det?index=10&jsondata=" + a).then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          var list = JSON.parse(datas.string.__text);
          this.tableDataqd = list.raws;
          this.tableDatasc = list.plan;
          this.form = list.mes;
          this.pingkingno = list.mes.pingkingno;
          // console.log(list.mes.pingkingno)
          // console.log(this.pingkingno)
          var dd = new Date(parseInt(list.mes.pingkingon.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          list.mes.pingkingon = y + "-" + m + "-" + d + " ";
        }
      );
    },
    // 详情页面跳转
    Detail(productionorderno, productno) {
      this.$router.push({
        path: "./ProductionDetails",
        query: { prod: productionorderno, row: productno }
      });
    },
    // 列表
    getlist(page) {
      var obj = {
        start: this.start,
        end: this.end,
        key: this.formInline.key,
        pn: page,
        PerPageSize: 10
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductionManagement.asmx/List?index=" +
          this.index +
          "&jsondata=" +
          objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.tableData = list;
        for (var i = 0; i < list.length; i++) {
          list[i].xuhao = 1 + i + 10 * page;
        }
        for (var i = 0; i < list.length; i++) {
          var dd = new Date(parseInt(list[i].jiaohuodate.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          list[i].jiaohuodate = y + "-" + m + "-" + d + " ";
        }
      });
    },
    Getlist() {
      var obj = {
        start: "",
        end: "",
        key: this.formInline.key,
        pn: 0,
        PerPageSize: 10000
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductionManagement.asmx/List?index=" +
          this.index +
          "&jsondata=" +
          objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.total = list.length;
      });
    },
    // 分页
    handleCurrentChange(e) {
      this.getlist(e - 1);
    },
    // 日期改变
    chage(e) {
      console.log("e");
      console.log(e);
      if (e) {
        this.start =
          e[0].getFullYear() +
          "-" +
          (e[0].getMonth() + 1) +
          "-" +
          e[0].getDate();
        this.end =
          e[1].getFullYear() +
          "-" +
          (e[1].getMonth() + 1) +
          "-" +
          e[1].getDate();
      } else {
        this.start = "";
        this.end = "";
      }
    },
    // 筛选
    onsubmit() {
      console.log("e");
      this.getlist(0);
    },
    pinkBtn() {
      // var obj = {
      //   pingkingno: this.pingkingno
      // };
      // var objs = JSON.stringify(obj);
      // console.log(objs, "13131");
      // console.log(this.pingkingno)
      axios(
        "apis/ProductionManagement.asmx/Save?index=1&jsondata=" + this.pingkingno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log(datas);
        if (datas.string.__text == "SUCCESS") {
          this.$message.success("领料成功!");
          this.dialogVisiblepicking = false;
        } else {
          this.$message.error(datas.string.__text);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.Productionmanage {
  width: 98%;
  margin-top: 20px;
}
.ProductionmanageList {
  width: 99%;
  margin-top: 20px;
  margin-left: 15px;
  // margin: 0 auto;
  background-color: $white;
  border: 1px solid $linecolor;
}
.accessories {
  width: 99%;
  // border: 1px solid #000;
}
.Btn {
  text-align: center;
  margin-top: 10px;
  // border: 1px solid #000;
}
.f1 {
  width: 30%;
  display: inline-block;
}
.accMessage {
  width: 35%;
  height: 45px;
  // border: 1px solid #000;
  display: inline-block;
  margin-left: 10px;
}
.wb {
  width: 80%;
  float: right;
}
.accspan {
  line-height: 50px;
}
.Headline {
  height: 40px;
  line-height: 40px;
  font-weight: 700;
  // border: 1px solid #000;
}

.color_box {
  width: 5px;
  height: 20px;
  background-color: $Header_color;
  position: absolute;
  top: 22px;
  left: 10px;
}
.search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin-bottom: 20px;
  width: 97.5%;
  margin-left: 15px;
}
.ebtn {
  float: right;
  margin-right: 20px;
  // margin-top: -63px;
}
.pgnt {
  text-align: center;
}
.demo-form-inline {
  display: inline-block;
}
</style>